<template>
	<view class="dirve-list-page">
		<block v-if="vechileList.length > 0">
			<view class="drive-list" v-for="(item,index) in vechileList" :key="item.userId" @click="changeIndex = index">
				<view :class="changeIndex == index?'change-drive-btn':'change-drive'"></view>
				<view class="drive-info">
					<view class="drive-headportrait">
						<image style="width: 100%;height: 100%;" :src="item.photo" mode="aspectFill"></image>
					</view>
					<view class="drive-info-conten">
						<view class="drive-info-name">
							{{ item.brand }}{{ item.seatAmount }}座{{ types(item.vehicleClass) }}
						</view>
						<view class="drive-info-phone">
							{{item.number}}
						</view>
						<view class="drive-info-phone">
							{{ item.driverNickName || '未关联司机' }}
						</view>
					</view>
				</view>
			</view>
		</block>
		<view v-else>
			<!-- <u-empty text="未匹配到司机" mode="data"></u-empty> -->
			<l-no-data text="暂无数据" type="data" />
		</view>
		<view class="btn">
			<view class="btn-conten">
				<view class="close-btn" :style="{'margin-right': vechileList.length > 0 ? '28rpx' : '0rpx'}" @click="closeFn">
					取消
				</view>
				<view class="sucess-btn" v-if="vechileList.length > 0" @click="changeVechile(vechileList[changeIndex])">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import { publishVehicleList } from '@/common/api/car.js'
	import { formatAutoClassLabel } from '@/vehicle/index.js'
	export default{
		data(){
			return{
				objPerson:{},
				optionVallue:{},
				vechileList:{},
				personData:null,
				changeIndex:0
			}
		},
		computed:{
			types() {
			  return (autoClass) => {
			    if (formatAutoClassLabel(autoClass)) {
			      return '(' + formatAutoClassLabel(autoClass) + ')'
			    } else {
			      return ''
			    }
			  }
			},
			...mapGetters({
			  userId: 'userId',
			  userInfo: 'userInfo',
			})
		},
		onLoad(options) {
			if(JSON.parse(options.obj)){
				this.optionVallue = JSON.parse(options.obj)
				this.objPerson = Object.assign(this.objPerson,this.optionVallue)
				this.objPerson.companyId = this.userInfo.companyId
				console.log(this.objPerson)
				this.getList()
			}
		},
		methods:{
			closeFn(){
				this.jump()
			},
			changeVechile(data){
				console.log(data)
				this.setBusChooseVehicleInfo(data)
				this.jump()
			},
			async getList(){
				uni.showLoading({
					title: '加载中',
				 })
				let [err,res] = await publishVehicleList(this.objPerson)
				console.log(res)
				if(res){
					uni.hideLoading();
					let resData = []
					for(let value of res.data.data){
						if(!value.cannotLabels || value.cannotLabels.length == 0){
							resData.push(value)
						}
					}
					console.log(resData)
					this.vechileList = resData
				}else{
					uni.hideLoading();
				}
			},
			...mapMutations({
			  setBusChooseVehicleInfo: 'order/setBusChooseVehicleInfo'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.dirve-list-page{
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		padding: 30rpx;
		padding-bottom: 210rpx;
		box-sizing: border-box;
		background-color: #f4f4f4;
		
		.drive-list {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 18rpx;
			background-color: #FFFFFFFF;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.change-drive{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				border: 2rpx solid #979797FF;
				margin-right: 50rpx;
			}
			.change-drive-btn{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				margin-right: 50rpx;
				background: linear-gradient(90deg, #E8C9A2 0%, #D9A96A 100%);
				position: relative;
			}
			.change-drive-btn::before{
				content: '';
				display: inline-block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-radius: 100%;
				height: 15rpx;
				width: 15rpx;
				background-color: #FFFFFFFF;
			}
			.drive-info{
				display: flex;
				align-items: center;
				.drive-headportrait{
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					border-radius: 12rpx;
					margin-right: 30rpx;
					& > image {
						width: 100%;
						height: 100%;
					}
				}
				.drive-info-conten{
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 160rpx;
					.drive-info-name{
						width: 350rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #000000FF;
						 overflow:hidden;
						  white-space: nowrap;
						  text-overflow: ellipsis;
						  -o-text-overflow:ellipsis;
					}
					.drive-info-phone{
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #00000099;
						line-height: 24rpx !important;
					}
				}
			}
		}
		.btn {
			width: 100vw;
			padding: 22rpx 30rpx 90rpx;
			box-sizing: border-box;
			background-color: #FFFFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			.btn-conten {
				flex: 1;
				display: flex;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
				.close-btn {
					flex: 1;
					padding: 32rpx 0;
					background-color: #EEEEEEFF;
					border-radius: 12rpx;
					color: #00000066;
					line-height: 32rpx;
				}
				.sucess-btn {
					flex: 1;
					padding: 32rpx 0;
					background: linear-gradient(90deg, #E8C9A2 0%, #D9A96A 100%);
					border-radius: 12rpx;
					color: #865825FF;
					line-height: 32rpx;
				}
			}
		}
		// .drive-list{
		// 	width: 100%;
		// 	height: auto;
		// 	padding: 20px;
		// 	box-sizing: border-box;
		// 	background-color: #fff;
		// 	border-radius: 18rpx;
		// 	display: flex;
		// 	align-items: center;
		// 	margin-bottom: 20rpx;
		// 	.list-image{
		// 		width: 300rpx;
		// 		height: 200rpx;
		// 		border-radius: 18rpx;
		// 		margin-right: 20rpx;
		// 		overflow: hidden;
		// 		background-size: 100% 100%;
		// 		background-repeat: no-repeat;
		// 	}
		// 	.list-info{
		// 		height: 200rpx;
		// 		padding: 10rpx;
		// 		display: flex;
		// 		flex-direction: column;
		// 		justify-content: space-between;
		// 		align-content: space-between;
		// 		.info-name{
		// 			font-size: 25rpx;
		// 			font-weight: 600;
		// 		}
		// 		.info-brand,.info-phone{
		// 			font-size: 20rpx;
		// 			font-weight: 400;
		// 			color: #999;
		// 		}
		// 	}
		// }
		
	}
</style>